<template>
<div class="home">
  <el-breadcrumb separator=">">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>权限管理</el-breadcrumb-item>
    <el-breadcrumb-item>权限列表</el-breadcrumb-item>
  </el-breadcrumb>
  
  <el-table :data="tableData.rightsList" height="740" border>
    <el-table-column type="index" label="ID" width="50"> </el-table-column>
    <el-table-column prop="authName" label="权限名称" width="180">
    </el-table-column>
    <el-table-column prop="path" label="路径" width="180"> </el-table-column>
    <el-table-column prop="level" label="层级"></el-table-column>
  </el-table>
  </div>
</template>
<script>
import { getRights } from "../../http/api";
import { onMounted, reactive } from "vue";
export default {
  setup() {
    let tableData = reactive({
      rightsList: [],
    });
    const getRightsFn = async () => {
      let res = await getRights();
      tableData.rightsList = res;
      console.log(tableData.rightsList);
    };
    onMounted(() => {
      getRightsFn();
    });
    return {
      tableData,
      getRightsFn,
    };
  },
};
</script>
<style scoped>
.el-table {
  width: 99%;
  margin: 0 auto;
}
.el-breadcrumb {
  padding-top: 10px;
  margin-left: 15px;
  margin-bottom: 10px;
}
.home{
    background: #fff;
    width: 98%;
    margin: 10px auto;
}
</style>